<template>
	<!-- 我的界面 / 登录用户可以进入 -->
	<div class="info-container">
		<van-nav-bar title="我的信息" left-text="返回" v-bind:right-text=rightText() left-arrow right-arrow
			@click-left="back()" @click-right="isEditUserInfo()" />

		<div v-if="!isEdit">
			<!-- 查看信息 -->
			<van-cell-group>
				<van-cell center title="登录账号" v-bind:value="userInfo.account" label="account" />
				<van-cell center title="登录密码" v-bind:value="userInfo.password" label="password" />
				<van-cell center title="头像地址" label="header">
					<!-- 自定义右侧样式 -->
					<van-image #right-icon width="50px" height="50px" v-bind:src="userInfo.header" />
				</van-cell>
				<van-cell center title="昵称" v-bind:value="userInfo.nick" label="nick" />
				<van-cell center title="自我描述" v-bind:value="userInfo.desc" label="desc" />
				<van-cell center title="生日" v-bind:value="userInfo.birthday" label="birthday" />
				<van-cell center title="权限" v-bind:value="userInfo.permission" label="permission" />
				<van-cell center title="性别" v-bind:value="userInfo.sex" label="sex" />
				<van-cell center title="电话" v-bind:value="userInfo.phone" label="phone" />
			</van-cell-group>
		</div>
		<div v-else>
			<!-- 修改信息 -->
			<van-cell-group>
				<van-cell center title="登录账号" v-bind:value="editInfo.account" label="不可修改" />
				<van-field v-model="editInfo.password" label="登录密码" placeholder="登录密码" />
				<van-cell title="头像" center>
					<template #right-icon>
						<!-- 自定义右侧样式 -->
						<van-uploader class="edit-head" v-model="headFile" accept="image/*" @oversize="onOversize"
							:max-count="1" multiple :before-read="beforeRead" :after-read="afterRead">
							<van-image width="50px" height="50px" type="primary" :src="editInfo.header" />
							<template #preview-cover="{ file }" class="edit-head-preview" />
						</van-uploader>
					</template>
				</van-cell>
				<van-field v-model="editInfo.nick" label="昵称" placeholder="昵称" />
				<van-field v-model="editInfo.desc" label="自我描述" placeholder="自我描述" />
				<van-cell title="生日" v-bind:value="editInfo.birthday" @click="changeDate" />
				<van-cell title="权限" v-bind:value="editInfo.permission" />
				<van-cell title="性别" v-bind:value="editInfo.sex" @click="selectSex()" />
				<van-field v-model="editInfo.phone" label="电话" placeholder="电话" />
			</van-cell-group>
		</div>

		<div class="footer-container">
			<van-button v-if="!isEdit" type="primary" class="footer-btn" @click="logout()">退出登录</van-button>
			<p>这就是底部文字 少管我</p>
		</div>

		<!-- 底部弹出 -->
		<van-popup v-model:show="isShowDate" position="bottom">
			<van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
				@confirm="dataConfirm" @cancel="dataCancel" @change="dataChange" />
		</van-popup>

		<van-popup v-model:show="isShowSex" position="bottom">
			<van-date-picker :columns="sexList" title="选择性别" @confirm="sexConfirm" @cancel="sexCancel"
				@change="sexChange" />
		</van-popup>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant'
	import {
		ref
	} from 'vue'
	export default {
		data() {
			// {
			// 	"account":"admin", // 登录账号
			// 	"password" :"admin", // 登录密码
			// 	"header":"http://127.0.0.1:5001/images/head.jpeg", // 头像地址
			// 	"nick":"管理员", // 昵称
			// 	"desc":"管理员不需要自我介绍", // 自我描述
			// 	"birthday":"0000-00-00 00:00:00.000", // 生日 客户端 到日 即可
			// 	"permission": -1, // 权限 , 数值越小, 能力越大
			// 	"sex":0, // 性别: 0 没有设置; 1 男; 2 女
			// 	"phone":"0576-90090000" // 电话 可以用来登录
			// }
			return {
				"isEdit": false,
				"userInfo": {},
				"editInfo": {},

				"account": "",
				"password": "",
				"header": "http://127.0.0.1:5001/images/head.jpeg",
				"nick": "",
				"desc": "",
				"birthday": "",
				"permission": -1,
				"sex": 0,
				"phone": "",

				"isShowDate": false,
				"isShowSex": false,
				"minDate": new Date(2020, 0, 1),
				"maxDate": new Date(2025, 5, 1),
				"currentDate": ref(['2021', '01', '01']),
				"sexList": [{
						text: '男',
						value: '1'
					},
					{
						text: '女',
						value: '2'
					},
				],
				"headFile": [

				]
			}
		},
		beforeCreate() {

		},
		created() {

		},
		beforeMount() {

		},
		mounted() {
			if (this.$store.getters.isLogin) {
				// 已经登录
				this.userInfo = this.$store.getters.userInfo
			} else {
				this.$router.back()
			}
		},
		beforeUpdate() {

		},
		updated() {

		},
		beforeDestroy() {

		},
		destroyed() {

		},
		methods: {
			rightText() {
				return this.isEdit ? "完成" : "修改"
			},
			isEditUserInfo() {
				if (this.isEdit) {
					this.commitInfo()
				} else {
					this.editInfo = this.userInfo
				}
				this.isEdit = !this.isEdit
			},
			back() {
				// 正在修改时 返回 -> 退出修改(不提交)
				if (this.isEdit) {
					this.isEdit = !this.isEdit
				} else {
					this.$router.back()
				}
			},
			commitInfo() {
				let that = this
				this.$http.editUserInfo(this.editInfo)
					.then(function(resp) {
						console.log(resp.data);
						// 修改用户信息成功 editInfo -> userInfo
						that.userInfo = that.editInfo
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {
						console.log("隐藏loading");
					})
			},
			logout() {
				// 退出登录 - 返回首页
				this.$store.commit('logout')
				this.$router.back()
			},
			chooseHeader() {

			},
			formatDate(y, m, d) {
				console.log("格式化");
				return "" + y + "-" + m + "-" + d
			},
			changeDate() {
				this.isShowDate = true
			},
			dataConfirm(data) {
				// 关闭对话框
				this.isShowDate = false
				this.userInfo.birthday = this.formatDate(data.selectedValues[0], data.selectedValues[1], data
					.selectedValues[2])
			},
			dataCancel(data) {
				// 关闭对话框
				this.isShowDate = false
			},
			dataChange(data) {},
			selectSex() {
				this.isShowSex = true
			},
			sexConfirm(data) {
				this.isShowSex = false
				this.userInfo.sex = data.selectedValues
			},
			sexCancel(data) {
				this.isShowSex = false
			},
			sexChange(data) {},
			onOversize(file) {
				console.log(file)
				showToast('文件大小不能超过 500kb')
			},
			beforeRead(file) {
				var suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`
				var regular = new RegExp(`.*\.${suffix}`)
				if (!regular.test(file.type)) {
					showToast('请选择图片文件');
					return false;
				}
				return true;
			},
			asynBeforeRead(file) {
				var suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`
				var regular = new RegExp(`.*\.${suffix}`)
				if (!regular.test(file.type)) {
					showToast('请选择图片文件');
				} else {

				}
			},
			afterRead(file) {
				let that = this
				this.$http.uploader({
						"file": file
					})
					.then(function(resp) {
						// 上传生成 保存图片地址 data.data
						console.log(resp.data);
						// 更新 修改的 头像地址
						that.editInfo.header = resp.data.data
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {
						console.log("隐藏loading");
					})
			}
		}
	}
</script>

<style lang="scss">
	.info-container {
		background-color: #f0f0f0;
		height: 100%;

		& .edit-head {
			width: 50px;
			height: 50px;

			& .van-uploader__preview {
				width: 50px;
				height: 50px;

				& .van-uploader__preview-image {
					width: 50px;
					height: 50px;
				}
			}
		}

		& .edit-head-preview {
			width: 36px;
			height: 36px;
		}

		& .footer-container {
			width: 100%;
			position: fixed;
			bottom: 0;
			text-align: center;
			color: #a0a0a0
		}

		& .footer-btn {
			width: 80%;
		}
	}
</style>